import { useState, useMemo } from "react";

const UseMemoChild1 = () => {
   const [a, setA] = useState(0)
   const [b, setB] = useState(0)
   const [c, setC] = useState(0)

   const handleFn = (type) => {
      switch (type) {
         case 'a':
            setA(a + 1)
            break;
         case 'b':
            setB(b + 1)
            break;
         case 'c':
            setC(c + 1)
            break;
            default:
             return false
      }

   }
   
   const d = useMemo(() => {
     console.log('====d触发了')
     return a + b
   }, [a, b]) // 返回的是一个计算属性的值
   
   return (<div>
      <h3>案例2-useMemo</h3>
      {/* 案例2 */}
      <p>a: {a}</p>
      <p>b: {b}</p>
      <p>c: {c}</p>
      <p>d: {d}</p>
      <button onClick={() => handleFn('a')}>a+1</button>
      <button onClick={() => handleFn('b')}>b+1</button>
      <button onClick={() => handleFn('c')}>c+1</button>

   </div>);
}

export default UseMemoChild1;